<template>
<div class="chat-content">
    <div class="chat-message-body scroll-container" ref="scrollbarRef">
        <!--引导页面-->
        <div class="chat-message">
            <a-skeleton avatar active :paragraph="{ rows: 3 }" v-if="state.loading"/>
            <div
                v-else
                class="message"
                v-for="item in state.data" :key="item.id"
            >
                <div
                    class="chat-assistant"
                    v-if="item.role == 'system' || item.role == 'assistant'"
                >
                    <a-avatar
                        class="avatar"
                        :size="40"
                        :src="fullUrl(state.chat_model.avatar)"
                        :alt="state.chat_model.name"
                    />
                    <!--正在输入加载-->
                    <div class="markdown-body" v-if="item.content == state.load_text">
                        <a-spin :indicator="indicator" />
                    </div>
                    <div class="markdown-body" v-else>
                        <div v-html="renderMarkdown(item.content)"></div>
                        <div
                            class="message-file"
                            v-if="!isEmpty(item.file)"
                        >
                            <div v-for="img in item.file" :key="img">
                                <a-image class="image" :src="fullUrl(img.url)" fit="cover" :preview-src-list="[fullUrl(img.url)]" />
                            </div>
                        </div>
                    </div>
                </div>
                <div
                    class="chat-user"
                    v-if="item.role == 'user'"
                >
                    <a-avatar
                        class="avatar"
                        :size="40"
                        :src="fullUrl(userInfo.avatar ? userInfo.avatar : '/static/images/avatar.png')"
                        :alt="userInfo.nickname"
                    />
                    <div class="markdown-body">
                        <div v-html="renderMarkdown(item.content)"></div>
                        <div
                            class="message-file"
                            v-if="!isEmpty(item.file)"
                        >
                            <div v-for="img in item.file" :key="img">
                                <a-image class="image" :src="fullUrl(img.url)" fit="cover" :preview-src-list="[fullUrl(img.url)]" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="stop-btn">
        <a-button style="cursor: pointer;z-index: 99" v-show="state.send.stop_show"  type="primary" danger ghost @click="onStop">停止</a-button>
    </div>
    <div
        class="chat-send1"
        :class="{screen: state.message_input.screen}"
        :style="{ height: isMobileWidth() ? aiLayoutConfig.layout.bottom.mobileHeight : dragAreaHeight }"
    >
        <div class="retract">
            <div class="center">
                <Icon name="iconfont icon-xia" size="14"/>
            </div>
        </div>
        <div class="drag" @mousedown="startDrag($event)"></div>
        <div class="chat-send-top">
            <div class="chat-send-top-left">
                <a-tooltip placement="bottom">
                    <template #title>模型</template>
                    <a-dropdown placement="topLeft" trigger="click">
                        <div class="item">
                            <Icon name="iconfont icon-model" size="18"/>
                        </div>
                        <template #overlay>
                            <a-menu class="model-lists" @click="onChatModel('model', $event.key)">
                                <a-menu-item
                                    v-for="item in chatConfig.model_list"
                                    :key="item.model"
                                    :class="{'ant-dropdown-menu-item-active': item.model == chat_model}"
                                >
                                    <div class="model-info">
                                        <div class="d1">
                                            <div class="model-icon" :class="{dd1: item.type == 1}">
                                                <Icon name="iconfont icon-ChatGPT" size="12"/>
                                            </div>
                                            <span>{{ item.model }}</span>
                                        </div>
                                        <div class="d2">
                                            <div class="anticon1">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="transparent" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-toy-brick "><rect width="18" height="12" x="3" y="8" rx="1"></rect><path d="M10 8V5c0-.6-.4-1-1-1H6a1 1 0 0 0-1 1v3"></path><path d="M19 8V5c0-.6-.4-1-1-1h-3a1 1 0 0 0-1 1v3"></path></svg>
                                            </div>
                                            <div class="anticon2">{{ item.max_token / 100 }}k</div>
                                        </div>
                                    </div>
                                </a-menu-item>
                            </a-menu>
                        </template>
                    </a-dropdown>
                </a-tooltip>
                <a-tooltip placement="bottom">
                    <template #title>上传图片</template>
                    <div class="item" @click="uploadImage">
                        <input accept="image/*" type="file" style="display: none">
                        <Icon name="iconfont icon-tupian" size="20"/>
                    </div>
                </a-tooltip>
                <a-tooltip placement="bottom">
                    <template #title>随机性</template>
                    <a-popover trigger="click">
                        <div class="item">
                            <Icon name="iconfont icon-lib" size="20"/>
                        </div>
                        <template #content>
                            <div class="chemistry">
                                <div class="d1">
                                    <a-slider v-model:value="chat_temperature" :min="0" :max="0.9" :step="0.1" />
                                </div>
                                <div class="d2">
                                    <a-input-number
                                        v-model:value="chat_temperature"
                                        :min="0"
                                        :max="0.9"
                                        :step="0.1"
                                        size="small"
                                        :controls="false"
                                        :change="onChatModel('randomness', chat_temperature)"
                                        width="100%"
                                    />
                                </div>
                            </div>
                        </template>
                    </a-popover>
                </a-tooltip>
                <a-tooltip placement="bottom">
                    <template #title>不限历史消息数</template>
                    <a-popover trigger="click">
                        <div class="item">
                            <Icon name="iconfont icon-lishi2" size="20"/>
                        </div>
                        <template #content>
                            <div class="chemistry" style="width: 200px">
                                <div class="d1">
                                    <a-slider v-model:value="chat_restriction" :min="1" :max="30" :step="1" />
                                </div>
                                <div class="d2">
                                    <a-input-number
                                        v-model:value="chat_restriction"
                                        :min="1"
                                        :max="30"
                                        :step="1"
                                        size="small"
                                        :controls="false"
                                        :change="onChatModel('restriction', chat_restriction)"
                                        width="100%"
                                    />
                                </div>
                                <div class="d3">
                                    <a-switch
                                        v-model:checked="chat_restriction_value"
                                        :change="onChatModel('restriction_value', chat_restriction_value)"
                                    />
                                </div>
                            </div>
                        </template>
                    </a-popover>
                </a-tooltip>
                <a-tooltip placement="bottom" v-if="!isMobileWidth()">
                    <template #title>语音输入</template>
                    <div class="item" @click="toggleVoice">
                        <Icon name="iconfont icon-yuyin" size="20"/>
                    </div>
                </a-tooltip>
                <a-tooltip placement="bottom">
                    <template #title>插件</template>
                    <div class="item" @click="toggleVoice">
                        <Icon name="iconfont icon-chajian" size="20"/>
                    </div>
                </a-tooltip>
            </div>
            <div class="chat-send-top-right">
                <a-tooltip placement="bottom">
                    <template #title>清空当前会话消息</template>
                    <a-popconfirm
                        placement="topRight"
                        title="即将清空当前会话消息，清空后将无法找回，请确认你的操作"
                        ok-text="确定"
                        cancel-text="取消"
                        @confirm="del_message"
                    >
                        <div class="item">
                            <Icon name="iconfont icon-qingkong" size="20"/>
                        </div>
                    </a-popconfirm>
                </a-tooltip>
                <div class="item" @click="ccc">
                    <Icon v-if="state.message_input.screen" name="iconfont icon-suoxiao1" size="20"/>
                    <Icon v-else name="iconfont icon-fangda1" size="20"/>
                </div>
            </div>
        </div>
        <div class="chat-send-content">
<!--            <textarea-->
<!--                class="chat-send-input scroll-container"-->
<!--                placeholder="输入聊天内容..."-->
<!--                ref="myTextarea" @keydown.enter="keydown"-->
<!--                v-model="state.send.content"-->
<!--            >-->
<!--            </textarea>-->
            <a-textarea
                class="chat-send-input scroll-container"
                v-model:value="state.send.content"
                placeholder="输入聊天内容..."
                ref="myTextarea" @keydown.enter="keydown"
                :rows="4"
                :bordered="false"
                allowClear
                :resize="false"
            />
        </div>
        <div class="chat-send-bottom">
            <div class="chat-send-bottom-left">
                <div class="file-list">
                    <div class="file-item" v-for="item in state.send.file_list" :key="item.id">
                        <a-image class="image" :src="fullUrl(item.full_url)" fit="cover" :preview-src-list="[fullUrl(item.full_url)]" />
                        <div class="delete" @click="file_delete(item)">
                            <Icon name="iconfont icon-shanchu" size="12"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="chat-send-bottom-right">
                <div class="chat-send-tip" v-if="message_enter">
                    <Icon name="iconfont icon-huiche" size="14"/>
                    <span>换行</span>
                    <span>/</span>
                    <Icon name="iconfont icon-ctrl" size="14"/>
                    <Icon name="iconfont icon-huiche" size="14"/>
                    <span>发送</span>
                </div>
                <div class="chat-send-tip" v-else>
                    <Icon name="iconfont icon-ctrl" size="14"/>
                    <Icon name="iconfont icon-huiche" size="14"/>
                    <span>发送</span>
                    <span>/</span>
                    <Icon name="iconfont icon-huiche" size="14"/>
                    <span>换行</span>
                </div>
                <div class="item1">
                    <a-button type="primary" class="save-btn" disabled>
                        <Icon name="iconfont icon-save01" size="20"/>
                    </a-button>
                </div>
                <div class="chat-send-button">
                    <a-dropdown-button
                        :loading="state.button.loading"
                        @click="sendMessage"
                        type="primary"
                    >
                        发送
                        <template #overlay>
                            <a-menu>
                                <a-menu-item key="1" @click="onEnter(true)">
                                    <Icon name="iconfont icon-duihao" size="14" v-if="message_enter" />
                                    按 Enter 键发送
                                </a-menu-item>
                                <a-menu-item key="2" @click="onEnter(false)">
                                    <Icon name="iconfont icon-duihao" size="14" v-if="!message_enter" />
                                    按 Ctrl + Enter 键发送
                                </a-menu-item>
                                <a-menu-divider />
                                <a-menu-item key="3" disabled>
                                    <Icon name="iconfont icon-jia" size="14"/>
                                    仅添加消息
                                </a-menu-item>
                            </a-menu>
                        </template>
                        <template #icon>
                            <Icon name="iconfont icon-xia" size="14"/>
                        </template>
                    </a-dropdown-button>
                </div>
            </div>
        </div>
        <div class="m-chat-send-input">
            <div class="eee" @click="toggleVoice">
                <Icon name="iconfont icon-yuyin" size="18"/>
            </div>
            <textarea
                class="chat-send-input1 scroll-container"
                placeholder="输入聊天内容..."
                ref="myTextarea" @keydown.enter="keydown"
                v-model="state.send.content"
            ></textarea>
            <div
                class="chat-send-button1"
                @click="sendMessage"
            >
                <Icon name="el-icon-Promotion" size="18"/>
            </div>
        </div>
    </div>
</div>
</template>

<script setup lang="ts">
import '/@/assets/web/scss/markdown.scss'
import '/@/assets/web/scss/highlight.scss'
import {inject, nextTick, onMounted, reactive, ref, watch, h} from 'vue'
import markdownIt from 'markdown-it'
import hljs from 'highlight.js'
import {getMessage, sendText} from '/@/api/frontend/chat/ai/message'
import {useUserInfo} from '/@/stores/userInfo'
import {fullUrl, isMobileWidth} from "/@/utils/common";
import Icon from "/@/components/icon/index.vue";
import { fileUpload } from '/@/api/common'
import { delMessage } from '/@/api/frontend/chat/ai/message'
import {isEmpty} from "lodash-es"
import { useAiConfig } from "/@/stores/aiConfig"
import { useChatConfig } from "/@/stores/openai/chatConfig"
import { useAiLayoutConfig } from '/@/stores/aiLayoutConfig'
import { LoadingOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { saveGroup } from '/@/api/frontend/chat/ai/group'

const toggleVoice = () => {
    message.info('即将上线')
}

// 聊天模型开始
const chatConfig = useChatConfig()
const chat_model = ref(chatConfig.chat.model)
const chat_temperature = ref(chatConfig.chat.temperature)
const chat_restriction = ref(chatConfig.chat.restriction)
const chat_restriction_value = ref(chatConfig.chat.restriction_value)
const onChatModel = (name: string, value: any) => {
    if (name === 'model') {
        chat_model.value = value
        chatConfig.chat.model = value
        // 保存模型
        saveGroup({
            id: props.groupId,
            model: value
        }).then((res) => {
            if (res.code == 1) {
                message.success('模型切换成功')
            }
        })
    }
    if (name === 'randomness') {
        chat_temperature.value = value
        chatConfig.chat.temperature = value
    }
    if (name === 'restriction') {
        chat_restriction.value = value
        chatConfig.chat.restriction = value
    }
    if (name === 'restriction_value') {
        chat_restriction_value.value = value
        chatConfig.chat.restriction_value = value
    }
}
// 聊天模型结束


const indicator = h(LoadingOutlined, {
    style: {
        fontSize: '20px',
    },
    spin: true,
});

const props = defineProps({
    groupTitle: {
        type: String,
        default: '新的消息'
    },
    groupId: {
        type: Number,
        default: 0
    },
    groupInfo: {
        type: Object,
        default: () => {}
    },
    groupList: {
        type: Function,
        default: () => {}
    },
})

const aiConfig = useAiConfig()
const aiLayoutConfig = useAiLayoutConfig()
const message_enter = ref(aiLayoutConfig.message.enter)
const onEnter = (value: boolean) => {
    message_enter.value = value
    aiLayoutConfig.message.enter = value
    message.success('切换成功')
}

const state: {
    loading: boolean,
    message_input: any,
    send: any
    data: any,
    load_text: string,
    form: any,
    button: anyObj
    chat_model: any,
} = reactive({
    loading: true,
    message_input: {
        screen: false,
    },
    send: {
        stop: false,
        stop_show: false,
        content: '',
        file_list: []
    },
    data: [
        {id: 1, role: "", content: ""}
    ],
    load_text: '正在输入..',
    form: {
        group_id: props.groupId,
        content: '',
        file_list: []
    },
    button: {
        loading: false
    },
    chat_model: chatConfig.assistant
})
//console.log(chatConfig.assistant)

const userInfo = useUserInfo()
const login_show = inject('login_show', ref(false))

watch(() => props.groupId, (value) => {
    if(isNaN(value)) {
        //state.wrapper = true
    }
    // 更新分组id
    state.form.group_id = value
    state.loading = true
    getMessageList(value)
    state.data = [{id: 1, role: 'system', content: state.chat_model.greeting, file: []}]
})

// 获取消息内容
const getMessageList =  (group_id: number) => {
    getMessage(group_id).then((res) => {
        if (res.code === 1) {
            state.data = state.data.concat(res.data.data)
            state.chat_model.name = res.data.ai_name
            state.chat_model.avatar = res.data.ai_avatar
            state.chat_model.greeting = res.data.ai_greeting
            chatConfig.chat.model = res.data.model
            // 第一个消息
            state.data[0].content = state.chat_model.greeting
            scrollToBottom(true, false);
            state.loading = false
        }
        // 底部
        scrollToBottom(true, false)
    })
}


// 拖拽
const dragAreaHeight = ref(aiLayoutConfig.layout.bottom.height) // 初始高度
const startDrag = (e: any) => {
    let targetDiv = document.getElementsByClassName("chat-send1")[0];
    let targetDivHeight = targetDiv.clientHeight;
    let startY = e.clientY;
    document.onmousemove =  (e) => {
        e.preventDefault();
        let distY = Math.abs(e.clientY - startY);
        dragAreaHeight.value = String(e.clientY > startY ? targetDivHeight - distY : targetDivHeight + distY) + 'px'
        aiLayoutConfig.setBottom({height: dragAreaHeight.value})
    }
    document.onmouseup = function () {
        document.onmousemove = null;
    }
}
// 放大高度
const ccc = () => {
    if (state.message_input.screen) {
        state.message_input.screen = false
        dragAreaHeight.value = '100px'
    } else {
        dragAreaHeight.value = '100%'
        state.message_input.screen = true
    }
}
// 拖拽

// 监听消息
// const chat_message = inject('chat_message', ref([]))
// watch(chat_message, (value: any) => {
//     if(value.list) {
//         state.wrapper = true
//     }
// })

// 监听onBottom
const onBottom = inject('onBottom', ref(false))
watch(onBottom, (value) => {
    if (value) {
        scrollToBottom(true, false);
        onBottom.value = false
    }
})
// 滚动条最底部
const scrollbarRef = ref<HTMLDivElement>();
const scrollToBottom = (force: any, smooth: any) =>{

    // 如果鼠标滚动则不滚动
    if (scrollbarRef.value!.scrollTop + scrollbarRef.value!.clientHeight < scrollbarRef.value!.scrollHeight - 100) {
        return
    }

    const behavior = smooth !== false ? "smooth" : "auto";
    if (force || scrollbarRef.value!.scrollHeight - scrollbarRef.value!.clientHeight <= scrollbarRef.value!.scrollTop + 100) {
        nextTick(() => {
            scrollbarRef.value!.scrollTo({
                top: scrollbarRef.value!.scrollHeight,
                behavior: behavior
            });
        })
    }
}
onMounted(() => {
    scrollToBottom(true, false);
})
// 监听onBottom


// 监听输入框回车事件
// const myTextarea = ref<HTMLTextAreaElement>();
// watch(state.send.content, (value) => {
//     const textarea = myTextarea.value!;
//     textarea.style.height = 'auto';
//     textarea.style.height = Math.min(textarea.scrollHeight, 300) + 'px';
// })

// 内容格式化
const renderMarkdown = (markdown: any) => {
    return markdownIt({
        linkify: true, // 添加linkify插件
        highlight: (str: string, lang: string) => {
            if (lang && hljs.getLanguage(lang)) {
                try {
                    return `<pre class="hljs"><div class="hljs-position"><span class="text-secondary">${lang}</span><span ref="preCopy" class="pre_copy">Copy</span></div><code>${hljs.highlight(str, {
                        language: lang,
                        ignoreIllegals: true
                    }).value}</code></pre>`
                } catch (__) {
                }
            }
            return `<pre class="hljs"><div class="hljs-position"><span ref="preCopy" class="pre_copy">Copy</span></div><code>${markdownIt().utils.escapeHtml(str)}</code></pre>`
        },
        breaks: true // 添加breaks插件
    }).render(markdown)
}

// 监听输入框回车事件 Enter 和 Ctrl + Enter 发送
const keydown = (event: any) => {
    if (event.key === 'Enter') {
        if (message_enter.value) {
            // Ctrl + Enter换行
            if (!event.ctrlKey) {
                event.preventDefault();
                sendMessage()
            } else {
                state.send.content += '\n'
            }
        } else {
            if (event.ctrlKey) {
                sendMessage()
            }
        }
    }
}

// 发送消息
const sendMessage = async () => {
    // 判断是否登录
    if(!userInfo.isLogin()) {
        login_show.value = true;
        return
    }

    if (state.send.content == '') return;
    //state.wrapper = false

    // 生成一个自己的消息 在生成一个加载中消息
    const newMessages = [
        {
            id: state.data.length + 1,
            avatar: fullUrl(userInfo.avatar ? userInfo.avatar : '/static/images/avatar.png'),
            role: 'user',
            content: state.send.content,
            file: state.send.file_list
        },
        {
            id: Date.now(),
            role: 'system',
            content: state.load_text,
            file: []
        }
    ];
    // 获取系统消息
    const systemMessages = newMessages[1];
    state.send.stop = false
    state.data = state.data.concat(newMessages);
    state.button.loading = true
    state.form.content = state.send.content
    state.form.file_list = state.send.file_list
    state.send.content = ''
    state.send.file_list = []
    scrollToBottom(true, false)

    // 请求接口获取加载中的消息
    const response = await sendText({
        group_id: state.form.group_id,
        content: state.form.content,
        file_list: state.form.file_list,
        // 模型
        model: chat_model.value,
        // 随机性
        temperature: chatConfig.chat.temperature,
        // 最大tokens
        max_tokens: 8000,
        // 限制上下文
        restriction: chat_restriction.value,
    });
    const content_type = response.headers.get('content-type');
    if (content_type?.indexOf('application/json') === 0) {
        const result = await response.json();
        state.data.forEach((item: any) => {
            if (item.id === systemMessages.id) {
                item.content = item.content.replace(state.load_text, '') + result.msg;
            }
        })
        state.button.loading = false
        return;
    }
    // 消息动作
    state.send.stop_show = true
    state.button.loading = false

    // 开始循环消息
    const reader = response.body!.getReader();
    const decoder = new TextDecoder();

    let partialLine = '';
    while (true) {
        const { done, value } = await reader.read();
        if (done) {
            state.send.stop_show = false
            state.button.loading = false

            // 正在输入中
            state.data.forEach((item: any) => {
                if (item.id === systemMessages.id) {
                    if (state.load_text === item.content) {
                        item.content = '加载失败'
                    }
                }
            })
            console.log(value)
            break;
        }

        const decodedText = decoder.decode(value, { stream: true });
        const chunk = partialLine + decodedText;
        const newLines = chunk.split(/\r?\n/);
        partialLine = newLines.pop() ?? '';

        // 判断为是否为json
        try {
            const result = JSON.parse(decodedText);
            if (result) {
                state.data.forEach((item: any) => {
                    if (item.id === systemMessages.id) {
                        item.content = decodedText
                    }
                })
                scrollToBottom(true, false);
            }
            state.send.stop_show = false
            state.button.loading = false
            return
        } catch (error) {

        }

        for (const line of newLines) {
            if (line.trim() === 'data: [DONE]' || line.length === 0 || line.startsWith(":")) {
                continue;
            }
            if (line === "data: [DONE]" || line.indexOf('data: [DONE]') === 0) {
                state.send.stop_show = false
                state.button.loading = false
                // 分组为空的清空刷新列表
                if (!props.groupId) {
                    // 延迟刷新列表
                    setTimeout(() => {
                        props.groupList();
                    }, 1000)
                }
                return
            }

            try {
                const trimmedLine = line.trim(); // 去除行首尾的空格
                if (trimmedLine.startsWith('data:')) {
                    const jsonData = trimmedLine.slice(5); // 去除 "data:" 前缀
                    const json = JSON.parse(jsonData);
                    if (json.choices) {
                        for (const choice of json.choices) {
                            const content = choice.delta?.content;
                            if (content) {
                                state.data.forEach((item: any) => {
                                    if (item.id === systemMessages.id) {
                                        item.content = item.content.replace(state.load_text, '') + content
                                    }
                                })
                                scrollToBottom(true, false);
                            }

                            if (state.send.stop) {
                                reader?.cancel()
                                state.send.stop_show = false
                                state.button.loading = false
                                break;
                            }
                        }
                    }
                }
            } catch (error) {
                state.data.forEach((item: any) => {
                    if (item.id === systemMessages.id) {
                        item.content = item.content.replace(state.load_text, '') + error
                    }
                })
                console.error(error);
            }
        }
    }
}
// #### 操作方法 ####
const onStop = () => {
    state.send.stop = true
    state.send.stop_show = false
}
const onText = (item: any) => {
    state.send.content = item.title
    //sendMessage()
}
// 删除消息chat_model
const del_message = () => {
    delMessage({
        group_id: state.form.group_id,
    }).then((res) => {
        if (res.code == 1) {
            message.success(res.msg)
            // 问候语
            state.data = [{id: 1, role: 'system', content: state.chat_model.greeting, file: []}]
        }
    })
}
// 上传图片
const uploadImage = () => {
    if(!userInfo.isLogin()) {
        login_show.value = true;
        return
    }

    const input = document.createElement('input');
    input.type = 'file';
    input.accept = 'image/*';
    input.multiple = true;
    input.onchange = handleFileUpload;
    input.click();
}
const handleFileUpload = (event: any) => {
    const files = event.target.files;
    if (files.length === 0) {
        return;
    }
    const formData = new FormData();
    for (const file of files) {
        formData.append('file', file);
    }
    fileUpload(formData).then((res: any) => {
        if (res.code === 1) {
            state.send.file_list = state.send.file_list.concat(res.data.file)
        } else {
            message.error(res.msg)
        }
    })
}
const file_delete = (item: any) => {
    state.send.file_list = state.send.file_list.filter((items: any) => items.id !== item.id)
}
</script>

<style scoped lang="scss">
.model-lists {
    max-height: 500px;
    //overflow-y: scroll;
    .model-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 32px;
        .d1 {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 8px;
            .model-icon {
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgb(25, 195, 125);
                border-radius: 50%;
                color: rgb(255, 255, 255);
                height: 20px;
                width: 20px;
                &.dd1 {
                    background: rgb(171, 104, 255);
                }
            }
        }
        .d2 {
            display: flex;
            gap: 4px;
            .anticon1 {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 20px;
                height: 20px;
                border-radius: 4px;
                color: #369eff;
                background: #f8faff;
            }
            .anticon2 {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 36px;
                height: 20px;
                font-size: 11px;
                color: #666666;
                background: rgba(0, 0, 0, 0.03);
                border-radius: 4px;
            }
        }
    }
}

.chemistry {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 160px;
    height: 26px;
    .d1 {
        flex: 1;
    }
    .d2 {
        width: 34px;
        .ant-input-number {
            width: 100%;
        }
    }
    .d3 {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.chat-send1 {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 200px;
    max-height: 800px;
    min-height: 230px;
    border-top: 1px solid var(--ct-border-color);
    padding: 12px 0 16px 0;
    gap: 8px;
    //transition: all 0.2s;
    position: relative;
    .retract {
        position: absolute;
        top: -16px;
        left: 0;
        width: 100%;
        height: 16px;
        .center {
            display: none;
            justify-content: center;
            align-items: center;
            position: absolute;
            left: 50%;
            width: 40px;
            height: 16px;
            border-radius: 4px 4px 0 0;
            border: 1px solid #e3e3e3;
            color: #666666;
            transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
            background: rgba(0, 0, 0, 0.06);
            cursor: pointer;
            &:hover {
                color: #080808;
                background: rgba(0, 0, 0, 0.12);
            }
        }
        &:hover {
            .center {
                display: flex;
            }
        }
    }
    &:hover {
        .retract {
            .center {
                display: flex;
            }
        }
    }
    .drag {
        position: absolute;
        width: 100%;
        height: 10px;
        top: -5px;
        cursor: row-resize;
        &:hover {
            &::before {
                content: '';
                position: absolute;
                z-index: 50;
                background: #222222;
                inset-block-start: 50%;
                width: 100%;
                height: 2px;
                transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
            }
        }
    }
    .chat-send-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 4px;
        height: 36px;
        padding: 0 16px;
        .chat-send-top-left, .chat-send-top-right {
            display: flex;
            align-items: center;
            gap: 5px;
            .item {
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 5px;
                height: 36px;
                width: 36px;
                cursor: pointer;
                color: #999;
                &:hover, &.active {
                    background-color: rgba(0, 0, 0, 0.06);
                }
            }
        }
    }
    .chat-send-content {
        padding: 0 24px;
        flex: 1;
        transition: all 0.3s;
        .chat-send-input {
            width: 100%;
            height: 100%;
            min-height: 36px;
            //line-height: 1.5;
            //font-weight: 500;
            //vertical-align: bottom;
            //resize: none;
            //box-shadow: none;
            //border: none;
            //font-size: 15px;
            //background-color: var(--el-input-bg-color);
            :deep(.ant-input) {
                padding: 0;
                resize: none;
            }
        }
    }
    .chat-send-bottom {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        padding: 0 24px;
        .chat-send-bottom-left, .chat-send-bottom-right {
            display: flex;
            align-items: center;
            gap: 8px;
            .item {
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 5px;
                height: 36px;
                width: 36px;
                cursor: pointer;
                &:hover {
                    //color: #080808;
                    background-color: rgba(0, 0, 0, 0.06);
                }
            }
            .save-btn {
                color: var(--el-text-color);
                padding: 2px 10px;
            }
            .chat-send-tip {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 4px;
                color: rgb(153, 153, 153);
                font-size: 12px;
                margin-right: 12px;
            }
            .chat-send-button {
                display: flex;
                align-items: center;
            }
        }

        .chat-send-bottom-left {
            .file-list {
                display: flex;
                align-items: center;
                gap: 8px;
                .file-item {
                    width: 64px;
                    height: 64px;
                    border-radius: 5px;
                    overflow: hidden;
                    cursor: pointer;
                    position: relative;
                    &:hover {
                        box-shadow: 0 0 0 1px #dcdfe6;
                    }
                    .image {
                        width: 100%;
                        height: 100%;
                    }
                    &:hover {
                        .delete {
                            position: absolute;
                            top: 0;
                            right: 0;
                            border-radius: 5px;
                            height: 24px;
                            width: 24px;
                            background-color: rgba(0, 0, 0, 0.5);
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            color: var(--el-bg-color);
                            cursor: pointer;
                            &:hover {
                                background-color: rgba(0, 0, 0, 0.8);
                            }
                        }
                    }
                }
            }
        }
        .chat-send-bottom-right {
            height: 36px;
        }
    }
    .m-chat-send-input {
        display: none;
    }
}
@media (max-width: 768px) {
    .chat-send1 {
        border-top: none;
        height: auto;
        min-height: auto;
        .retract {
            display: none;
        }
        .drag {
            display: none;
        }
        .chat-send-top {
            padding: 0 8px;
        }
        .chat-send-content {
            display: none;
        }
        .chat-send-bottom {
            display: none;
        }
        .m-chat-send-input {
            flex: 1;
            display: flex;
            align-items: flex-end;
            gap: 8px;
            padding: 0 8px;
            .eee {
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 5px;
                height: 36px;
                width: 36px;
                background: rgba(0, 0, 0, 0.03);
                cursor: not-allowed;
            }
            .chat-send-input1 {
                flex: 1;
                resize: none;
                height: 36px;
                padding-block: 6px;
                overflow-y: hidden;
                max-width: 100%;
                line-height: 1.5;
                vertical-align: bottom;
                transition: all 0.3s,height 0s;
                background-color: rgba(0, 0, 0, 0.03);
                border: 1px solid transparent;
                padding: 8px 12px;
                border-radius: 5px;
                font-size: 14px;
                font-weight: 500;
                &:hover {
                    border-color: #333333;
                }
            }
            .chat-send-button1 {
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 5px;
                height: 36px;
                width: 36px;
                background: #000;
                color: #fff;
            }
        }
    }
}
</style>

<style scoped lang="scss">
.stop-btn {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 95px;
    left: 0;
    right: 0;
}
@media (max-width: 768px) {
    .stop-btn {
        display: none;
    }
}
</style>
